<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css"/>
    <link rel="stylesheet" type="text/css" href="./lib/swiper.css"/>
    <!--<script src="js/swiper1.js"></script>-->
    <script src="lib/vue.min.js"></script>
    <script src="lib/swiper.js"></script>
</head>
<body>
<div id="app">
    <div >
    	
        <!--<p>这是默认字体大小</p><p style="font-size: 10.5px">对比一下</p><p style="font-size: 12rem">对比一下</p>-->
        <!--<div style="text-align: center;position: absolute;top: 0;left: 0;z-index: 99;width: 100%;z-index: 1">-->
            <!--<img src="./img/华龙网网站效果psd_01.png" style="width:  100%;height: auto;z-index: 1;">-->
        <!--</div>-->
        <div style="background: url('./img/华龙网网站效果psd_01.png');background-size: 100%;background-repeat: no-repeat;margin: 0 auto;min-width: 997.07px;">
            <div style="width: 100%;">
                <img src="img/华龙网网站效果psd_01.png" style="width: 100%;"/>
                <div style="margin: 0 auto;position: absolute;top: 0;width: 100%;">
                    <div style="max-width: 997.07px;margin: 0 auto;text-align: center;">
                        <div class="titleEa">
                            <div class="nav">
                                <a href="www.baidu.com">首页</a>
                                <a href="www.baidu.com">孕期营养师</a>
                                <a href="www.baidu.com">月子期营养师</a>
                                <a href="www.baidu.com">产后营养师</a>
                                <a href="www.baidu.com">月子期营养师</a>
                                <a href="www.baidu.com">
                                    <img src="./img/效果图_03.png" class="titleImg"/>
                                </a>
                            </div>
                        </div>
                    </div>np
                </div>
            </div>

        </div>
        <div style="max-width: 997.07px;margin: 0 auto;text-align: center;">
            <!--国学胎教-->
            <div  class="ea" >
                <div class="subTitleEa" style="overflow: auto;">
                    <img src="./img/效果图_11.png" style="height: 20.50px;float: left;">
                    <p class="common-p">MORE</p>
                    <!--<p class="guoxuetaijiaoP">国学胎教</p>-->
                </div>
                <div style="overflow: auto;">
                    <div class="imgEa">
                        <div class="guoxuetaijiaoImgP">
                            <a href="www.baidu.com">
                                <img src="img/效果图_22.png" class="guoxuetaijiaoImg">
                                <p>国学胎教课</p>
                            </a>
                        </div>
                    </div>
                    <div class="imgEa">
                        <div class="guoxuetaijiaoImgP">
                            <a href="www.baidu.com">
                                <img src="img/效果图_24.png" class="guoxuetaijiaoImg">
                                <p>国学胎教课</p>
                            </a>
                        </div>
                    </div>
                    <div class="imgEa">
                        <div class="guoxuetaijiaoImgP">
                            <a href="www.baidu.com">
                                <img src="img/效果图_26.png" class="guoxuetaijiaoImg">
                                <p>国学胎教课</p>
                            </a>
                        </div>
                    </div>
                </div>

                <div class="line"></div>

                <div class="swiper1Ea" style="text-align: center;">
                    <swiper1 :swiperimglist="swiper1ImgList"></swiper1>
                </div>
            </div>
            <!--名店推荐-->
            <div class="ea">
                <div class="subTitleEa" style="overflow: auto;">
                    <img src="./img/效果图_48.png" style="height: 20.50px;float: left;">
                    <p class="common-p">MORE</p>
                    <!--<p class="guoxuetaijiaoP">名店推荐</p>-->
                </div>
                <div style="overflow: auto;">
                    <div class="mdtj-imgEa" style="margin-left: 0">
                        <a href="www.baidu.com">
                        <img src="./img/效果图_57.png" style="width: 215.23px;height: 144.22px;">
                        <p class="mdtj-p1">皇家月子会所</p>
                        <p class="mdtj-p2">华龙健康网和重庆智慧门..<span class="detail-p">[详细]</span></p>
                        </a>
                    </div>
                    <div class="mdtj-imgEa">
                        <a href="www.baidu.com">
                        <img src="./img/效果图_59.png" style="width: 215.23px;height: 144.22px;">
                        <p class="mdtj-p1">皇家月子会所</p>
                        <p class="mdtj-p2">华龙健康网和重庆智慧门..<span class="detail-p">[详细]</span></p>
                        </a>
                    </div>
                    <div class="mdtj-imgEa">
                        <a href="www.baidu.com">
                        <img src="img/效果图_61.png" style="width: 215.23px;height: 144.22px;">
                        <p class="mdtj-p1">皇家月子会所</p>
                        <p class="mdtj-p2">华龙健康网和重庆智慧门..<span class="detail-p">[详细]</span></p>
                        </a>
                    </div>
                    <div class="mdtj-imgEa1">
                        <a href="www.baidu.com">
                        <img src="img/效果图_52.png" class="mdtj-img1"/>
                        <div class="mdtj-btn">孕呱呱月子餐</div>
                        </a>
                    </div>

                    <div class="mdtj-imgEa" style="margin-left: 0">
                        <a href="www.baidu.com">
                        <img src="img/效果图_91.png" style="width: 215.23px;height: 144.22px;">
                        <p class="mdtj-p1">皇家月子会所</p>
                        <p class="mdtj-p2">华龙健康网和重庆智慧门..<span class="detail-p">[详细]</span></p>
                        </a>
                    </div>
                    <div class="mdtj-imgEa">
                        <a href="www.baidu.com">
                        <img src="img/效果图_94.png" style="width: 215.23px;height: 144.22px;">
                        <p class="mdtj-p1">皇家月子会所</p>
                        <p class="mdtj-p2">华龙健康网和重庆智慧门..<span class="detail-p">[详细]</span></p>
                        </a>
                    </div>
                    <div class="mdtj-imgEa">
                        <a href="www.baidu.com">
                        <img src="img/效果图_96.png" style="width: 215.23px;height: 144.22px;">
                        <p class="mdtj-p1">皇家月子会所</p>
                        <p class="mdtj-p2">华龙健康网和重庆智慧门..<span class="detail-p">[详细]</span></p>
                        </a>
                    </div>
                    <div class="mdtj-imgEa1">
                        <div class="mdtj-img1">
                            <div style="display: inline-block;width: 142.75px;float: left;">
                                <img src="img/效果图_98.png" style="margin: 0 auto;" class="mdtj-img">
                                <p class="mdtj-p2" style="font-size: 13.18px;text-align: center;">合作热线:15310827818</p>
                            </div>
                            <p class="mdtj-p"><span>华龙网</span>是给个人、企业
                                和组织提供业务服务与用
                                户管、理能力的全新服务
                                平台。和组织提供业务服
                                务与用户管、理能力的全新服务平台和组织提供业
                                理能力的全新服务平台。</p>
                        </div>
                        <div class="mdtj-btn">孕呱呱微信公众号</div>
                    </div>
                </div>
            </div>
            <!--周边产业-->
            <div class="ea">
                <div class="subTitleEa" style="overflow: auto;">
                    <img src="./img/效果图_120.png" style="height: 20.50px;float: left;">
                    <p class="common-p">MORE</p>
                    <!--<p class="guoxuetaijiaoP">周边产品</p>-->
                </div>
                <div style="padding: 36.60px;overflow: auto;">
                    <div class="zbcp-btnEa" style="width: 197.66px;text-align: center;float: left;">
                        <div :class="nowIndex==index?'active':''" class="zbcp-btn" v-for="(v,index) in zbcpBtn"
                             @mouseOver="clickHandle(index)" style="display: flex;align-items: center;"><img :src="v.imgUrl" style="width: 30px;margin-left: 15px;margin-right: 15px;"/>{{v.title}}
                        </div>
                    </div>
                    <div class="zbcp-showEa" v-if="nowIndex==0">
                        <swiper2 :imgsrclist="imgSrcList1"></swiper2>
                    </div>
                    <div class="zbcp-showEa" v-if="nowIndex==1">
                        <swiper2 :imgsrclist="imgSrcList2"></swiper2>
                    </div>
                    <div class="zbcp-showEa" v-if="nowIndex==2">
                        <swiper2 :imgsrclist="imgSrcList3"></swiper2>
                    </div>
                    <div class="zbcp-showEa" v-if="nowIndex==3">
                        <swiper2 :imgsrclist="imgSrcList4"></swiper2>
                    </div>
                    <div class="zbcp-showEa" v-if="nowIndex==4">
                        <swiper2 :imgsrclist="imgSrcList3"></swiper2>
                    </div>
                </div>
            </div>


            <!--育儿课堂-->
            <div class="ea">
                <div class="subTitleEa" style="overflow: auto;">
                    <img src="./img/效果图_128.png" style="height: 20.50px;float: left;">
                    <p class="common-p">MORE</p>
                    <!--<p class="guoxuetaijiaoP">育儿课堂</p>-->
                </div>
                <div style="margin-top: 21.96px;overflow: auto">
                    <div class="yekt-imgEa" style="margin-left: 0">
                        <a href="www.baidu.com">
                        <img src="img/效果图_134.png" style="height: 224.01px;width: 100%;">
                        <p class="yekt-p1">《鞋宝宝》故事 咔咔成长乐园</p>
                        </a>
                    </div>
                    <div class="yekt-imgEa">
                        <a href="www.baidu.com">
                        <img src="img/效果图_134.png" style="height: 224.01px;width: 100%;">
                        <p class="yekt-p1">《鞋宝宝》故事 咔咔成长乐园</p>
                        </a>
                    </div>
                    <div class="yekt-imgEa">
                        <a href="www.baidu.com">
                        <img src="img/效果图_134.png" style="height: 224.01px;width: 100%;">
                        <p class="yekt-p1">《鞋宝宝》故事 咔咔成长乐园</p>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
<script>
    var Swiper2 = Vue.extend({
        props: ['imgsrclist'],
        template: '<div class="swiper-container swiper-container2">\n' +
        '                            <div class="swiper-wrapper" style="z-index: 1;">\n' +
        '                                <div class="swiper-slide" v-for="v in imgsrclist">\n' +
            '<a href="v.url">' +
        '                                    <img :src="v.imgsrc" style="width: 100%;height: 331.63px;margin-top:0;">\n' +
        '</a>'+

        '<div class="swiper2Pre" style="position: absolute;bottom: 0px;left: 0;width: 100%;z-index: 999">\n' +
        '                <div class="pre"><img class="preImg" src="img/左方向键.png"></div>\n' +
        '                <!--左箭头-->\n' +
        '<p style="color: red;text-align: center;width: 449.49px;line-height: 52.71px;float: left;font-size: 11.71px;color: white;">{{v.imgtext}}</p>'+
        '                <div class="next"><img class="nextImg" src="img/右方向键.png"></div>\n' +
        '                <!--右箭头-->\n' +
        '            </div>' +
        '                                </div>\n' +
        '                            </div>\n' +

        '                            <!-- Add Pagination -->\n' +
        '                        </div>',
        mounted: function () {
            var swiper2 = new Swiper('.swiper-container2', {
                slidesPerView: 1,
                spaceBetween: 30,
                pagination: {
                    el: '.swiper-p2',
                    clickable: false,
                },
                navigation: {
                    nextEl: '.next',
                    prevEl: '.pre',
                },
            });
        },

    })

    var Swiper1 = Vue.extend({
        props: ['swiperimglist'],
        template: '<div class="swiper-container swiper-container1">\n' +
        '                            <div class="swiper-wrapper">\n' +
        '                                <div class="swiper-slide" v-for="v in swiperimglist">\n' +
        '<a :href="v.imgurl">' +
        '                                    <img :src="v.imgsrc" style="width: 214.49px;height: 103.95px;margin-top: 16.11px;">\n' +
        '</a>' +
        '                                </div>\n' +
        '                            </div>\n' +
        '                            <!-- Add Pagination -->\n' +
        '                        </div>',
        mounted: function () {
            var swiper1 = new Swiper('.swiper-container1', {
                slidesPerView: 4,
                spaceBetween: 30,
                autoplay:true,
                pagination: {
                    el: '.swiper-pagination1',
                    clickable: false,
                },
            });
        }
    })
    Vue.component('swiper1', Swiper1)
    Vue.component('swiper2', Swiper2)


    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js!',
            zbcpBtn: [{title:"辣妈塑形",imgUrl:"./img/1.png"}, {title:"小儿推拿",imgUrl:"./img/2.png"}, {title:"宝宝摄影",imgUrl:"./img/3.png"}, {title:"婴儿游泳",imgUrl:"./img/4.png"}, {title:"玩具图书馆",imgUrl:"./img/5.png"}],
            nowIndex: 0,
            imgSrcList1: [
                {imgsrc: "./img/华龙网网站效果psd_12.png", imgurl: "www.baidu.com",imgtext:"这是文字"},
                {imgsrc: "./img/华龙网网站效果psd_12.png", imgurl: "www.baidu.com",imgtext:"这是文字1"},
                {imgsrc: "./img/华龙网网站效果psd_12.png", imgurl: "www.baidu.com",imgtext:"这是文字2"}
                ],
            imgSrcList2: [
                {imgsrc: "./img/华龙网网站效果psd_01.png", imgurl: "www.baidu.com",imgtext:"这是文字0"},
                {imgsrc: "./img/华龙网网站效果psd_01.png", imgurl: "www.baidu.com",imgtext:"这是文字1"},
                {imgsrc: "./img/华龙网网站效果psd_01.png", imgurl: "www.baidu.com",imgtext:"这是文字2"},
                ],
            imgSrcList3: [
                {imgsrc: "./img/华龙网网站效果psd_12.png", imgurl: "www.baidu.com",imgtext:"这是文字"},
                {imgsrc: "./img/华龙网网站效果psd_12.png", imgurl: "www.baidu.com",imgtext:"这是文字1"},
                {imgsrc: "./img/华龙网网站效果psd_12.png", imgurl: "www.baidu.com",imgtext:"这是文字2"}
                ],
            imgSrcList4: [
                {imgsrc: "./img/华龙网网站效果psd_01.png", imgurl: "www.baidu.com",imgtext:"这是文字0"},
                {imgsrc: "./img/华龙网网站效果psd_01.png", imgurl: "www.baidu.com",imgtext:"这是文字1"},
                {imgsrc: "./img/华龙网网站效果psd_01.png", imgurl: "www.baidu.com",imgtext:"这是文字2"},
                ],
            //swiper1图片
            swiper1ImgList: [
                {imgsrc: "./img/效果图_35.png", imgurl: "www.baidu.com"},
                {imgsrc: "./img/效果图_37.png", imgurl: "www.baidu.com"},
                {imgsrc: "./img/效果图_39.png", imgurl: "www.baidu.com"},
                {imgsrc: "./img/效果图_41.png", imgurl: "www.baidu.com"},
                {imgsrc: "./img/效果图_35.png", imgurl: "www.baidu.com"},
                {imgsrc: "./img/效果图_37.png", imgurl: "www.baidu.com"},
                {imgsrc: "./img/效果图_39.png", imgurl: "www.baidu.com"},
                {imgsrc: "./img/效果图_41.png", imgurl: "www.baidu.com"},

            ],

        },
        mounted: function () {
        },
        methods: {
            clickHandle: function (index) {
                this.nowIndex = index;
                var swiper2 = new Swiper('.swiper-container2', {
                    slidesPerView: 1,
                    spaceBetween: 30,
                    pagination: {
                        el: '.swiper-p2',
                        clickable: false,
                    },
                    navigation: {
                        nextEl: '.next',
                        prevEl: '.pre',
                    },
                });
            }
        },
    })

</script>
</html>